<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 应聘详情</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/employer/dashboard.css" rel="stylesheet">
    <style>
        .applicant-profile {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .section-title {
            border-bottom: 2px solid #5c6bc0;
            padding-bottom: 10px;
            margin-bottom: 20px;
            color: #5c6bc0;
        }
        
        .score-card {
            display: flex;
            margin-bottom: 10px;
            align-items: center;
        }
        
        .score-label {
            width: 150px;
            font-weight: 500;
        }
        
        .score-bar-container {
            flex-grow: 1;
            background-color: #e9ecef;
            height: 15px;
            border-radius: 5px;
            overflow: hidden;
            margin-right: 10px;
        }
        
        .score-bar {
            background-color: #5c6bc0;
            height: 100%;
        }
        
        .score-value {
            width: 40px;
            text-align: right;
            font-weight: 600;
        }
        
        .status-badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 4px;
            font-weight: 500;
            text-transform: uppercase;
            font-size: 12px;
        }
        
        .status-badge.completed {
            background-color: #8bc34a;
            color: white;
        }
        
        .status-badge.pending {
            background-color: #ffc107;
            color: #333;
        }
        
        .status-badge.rejected {
            background-color: #f44336;
            color: white;
        }
        
        .status-badge.accepted {
            background-color: #4caf50;
            color: white;
        }
        
        .feedback-section {
            margin-top: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
        }
        
        .action-buttons {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }
    </style>
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="/company/dashboard">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li>
                    <a href="/company/jobManage">
                        <i class='bx bx-briefcase'></i>
                        <span>职位管理</span>
                    </a>
                </li>
                <li>
                    <a href="/company/companyCenter">
                        <i class='bx bx-cog'></i>
                        <span>企业设置</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="top-bar">
                <div class="user-menu">
                    <img src="{{ url_for('static', filename='applicant_logo/公司头像.png') }}" alt="企业Logo" class="avatar">
                    <div class="dropdown">
                        <button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown">
                            {{ company.company_name }}
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/company/companyCenter"><i class='bx bx-cog'></i> 企业设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout"><i class='bx bx-log-out'></i> 退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="dashboard-content">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2>应聘详情</h2>
                    <a href="/company/dashboard" class="btn btn-secondary">
                        <i class='bx bx-arrow-back'></i> 返回控制台
                    </a>
                </div>
                
                <!-- 职位信息卡片 -->
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">职位信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>职位名称:</strong> {{ application.job.title }}</p>
                                <p><strong>职位类型:</strong> {{ application.job.job_type }}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>薪资范围:</strong> {{ application.job.min_salary }} - {{ application.job.max_salary }}</p>
                                <p><strong>工作地点:</strong> {{ application.job.location }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 申请人信息 -->
                <div class="applicant-profile">
                    <h3 class="section-title">申请人信息</h3>
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>姓名:</strong> {{ application.applicant.name }}</p>
                            <p><strong>性别:</strong> {{ application.applicant.gender }}</p>
                            <p><strong>联系电话:</strong> {{ application.applicant.phone }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>教育程度:</strong> {{ application.applicant.education_level }}</p>
                            <p><strong>工作年限:</strong> {{ application.applicant.work_years }} 年</p>
                            <p><strong>期望职位:</strong> {{ application.applicant.expected_position }}</p>
                            <p><strong>期望薪资:</strong> {{ application.applicant.expected_salary }}</p>
                        </div>
                    </div>
                </div>
                
                <!-- 应聘状态 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">应聘状态</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>申请时间:</strong> {{ application.apply_time }}</p>
                                <p>
                                    <strong>状态:</strong> 
                                    <span class="status-badge 
                                        {% if application.status == '录用' %}accepted
                                        {% elif application.status == '拒绝' %}rejected
                                        {% elif application.status == '已完成' %}completed
                                        {% else %}pending{% endif %}">
                                        {{ application.status }}
                                    </span>
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>AI评分:</strong> {{ application.ai_evaluation_score or '暂无' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- AI评估结果 -->
                {% if application.ai_evaluation_score %}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">AI评估结果</h5>
                    </div>
                    <div class="card-body">
                        <!-- 这里可以添加更详细的评估结果展示 -->
                        <div class="score-card">
                            <div class="score-label">总体得分</div>
                            <div class="score-bar-container">
                                <div class="score-bar" style="width: {{ application.ai_evaluation_score }}%"></div>
                            </div>
                            <div class="score-value">{{ application.ai_evaluation_score }}</div>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <!-- 操作区域 -->
                <div class="action-buttons">
                    {% if application.status in ['已投递', '已查看'] %}
                    <button class="btn btn-primary" id="inviteBtn" data-id="{{ application.application_id }}">发送面试邀请</button>
                    <button class="btn btn-danger" id="rejectBtn" data-id="{{ application.application_id }}">拒绝申请</button>
                    {% elif application.status == '已完成' %}
                    <button class="btn btn-success" id="acceptBtn" data-id="{{ application.application_id }}">录用</button>
                    <button class="btn btn-danger" id="rejectBtn" data-id="{{ application.application_id }}">拒绝</button>
                    {% endif %}
                    
                    <button class="btn btn-secondary" onclick="window.history.back()">返回</button>
                </div>
                
                <!-- 反馈表单 -->
                {% if application.status not in ['录用', '拒绝'] %}
                <div class="feedback-section">
                    <h4>添加反馈</h4>
                    <div class="mb-3">
                        <textarea class="form-control" id="feedbackText" rows="3" placeholder="添加对此申请人的反馈...">{{ application.feedback or '' }}</textarea>
                    </div>
                    <button class="btn btn-primary" id="saveFeedbackBtn" data-id="{{ application.application_id }}">保存反馈</button>
                </div>
                {% endif %}
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 发送面试邀请按钮
            const inviteBtn = document.getElementById('inviteBtn');
            if (inviteBtn) {
                inviteBtn.addEventListener('click', function() {
                    const applicationId = this.getAttribute('data-id');
                    sendRequest('/company/api/send_invitation/' + applicationId, '确定要发送面试邀请吗？');
                });
            }
            
            // 拒绝申请按钮
            const rejectBtn = document.getElementById('rejectBtn');
            if (rejectBtn) {
                rejectBtn.addEventListener('click', function() {
                    const applicationId = this.getAttribute('data-id');
                    sendRequest('/company/api/reject/' + applicationId, '确定要拒绝该申请吗？');
                });
            }
            
            // 录用按钮
            const acceptBtn = document.getElementById('acceptBtn');
            if (acceptBtn) {
                acceptBtn.addEventListener('click', function() {
                    const applicationId = this.getAttribute('data-id');
                    sendRequest('/company/api/accept/' + applicationId, '确定要录用该申请人吗？');
                });
            }
            
            // 保存反馈按钮
            const saveFeedbackBtn = document.getElementById('saveFeedbackBtn');
            if (saveFeedbackBtn) {
                saveFeedbackBtn.addEventListener('click', function() {
                    const applicationId = this.getAttribute('data-id');
                    const feedback = document.getElementById('feedbackText').value;
                    
                    fetch('/company/api/save_feedback/' + applicationId, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ feedback })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert('反馈已保存');
                        } else {
                            alert('保存反馈失败: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error saving feedback:', error);
                        alert('保存反馈失败');
                    });
                });
            }
            
            // 通用请求发送函数
            function sendRequest(url, confirmMsg) {
                if (confirm(confirmMsg)) {
                    fetch(url, {
                        method: 'POST'
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert('操作成功');
                            window.location.reload();
                        } else {
                            alert('操作失败: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('操作失败');
                    });
                }
            }
        });
    </script>
</body>
</html> 